<%--
 * Título: gestHora. Aplicación web de gestión de horarios para conservatorios.
 * Alumnos:
 * - Javier Pardo Muñoz. I.T. Informática de Gestión
 * - Antonio Prior Cazorla. I.T. Informática de Gestión
 * Director: Dr. José Raúl Romero Salguero.
 *     
 *  Copyright (C) 2013 Javier Pardo Muñoz / Antonio Prior Cazorla
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.

 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 --%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<jsp:useBean id="MsgBean" class="es.uco.gesthora.interfaz.MsgBean" scope="session"/>

<!DOCTYPE html>

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="/gestHora/css/general.css">
        <script type="text/javascript" src="/gestHora/js/jQuery.js"></script> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="icon" type="image/png" href="/gestHora/img/favicon.png" />
        <title>gestHora: Instalación del sistema</title>

        <script type="text/javascript"> 
            $(document).ready(function(){

                $('#auth_true').click(function() {
                    $('#oculto').fadeIn();
                });
        
                $('#auth_false').click(function() {
                    $('#oculto').fadeOut();
                });
            });
        </script>

    </head>

    <body>

        <div class="contenedor">

            <header class="header"> 

                <div class="header-contenido">

                    <a href="/gestHora/index.jsp"><img src="/gestHora/img/logo.png" alt="Logo gestHora"/></a>

                </div>

            </header>

            <div class="contenido">
                <div class="contenido-dentro">
                    <div class="contenido-principal contenido-principal-index" role="main">

                        <section class="contenido-articulo contenido-articulo-index">
                            <a class="volver" href="/gestHora/index.jsp"> &#8592; Ir a Inicio</a><br/>
                            <h2>Instalación de gestHora</h2>
                            <% if (MsgBean.getMsg().equals("")) {%>
                            <p>Bienvenido a gestHora.<br/><br/>
                                Desde esta pantalla podrá configurar su base de datos y crearla, configurar su servidor de correo y por último añadir un usuario administrador.</p>

                            <form class="formVistas" id="instalacion" method="post" action="/gestHora/instalar/instalarAplicacionController.jsp">

                                <fieldset>  

                                    <legend>Parámetros de la base de datos</legend>

                                    <label for="servidorBD">Servidor: </label>
                                    <input type="text" id="servidorBD" name="servidorBD" placeholder="localhost" tabindex="1" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Dirección del servidor MySQL</span></span><br/>

                                    <label for="usuarioBD">Usuario: </label>
                                    <input type="text" id="usuarioBD" name="usuarioBD" placeholder="mysql_user" tabindex="2" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Usuario de MySQL</span></span><br/>

                                    <label for="passwordBD">Contraseña: </label>
                                    <input type="password" id="passwordBD" name="passwordBD" tabindex="3" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Contraseña de MySQL</span></span><br/>


                                </fieldset>                               

                                <fieldset>  

                                    <legend>Parámetros del servidor de correo</legend>

                                    <label for="servidorMail">Servidor: </label>
                                    <input type="text" id="servidorMail" name="servidorMail" placeholder="smtp.gesthora.com" tabindex="4" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Dirección del servidor de correo</span></span><br/>

                                    <label for="puertoMail">Puerto: </label>
                                    <input type="text" id="puertoMail" name="puertoMail" placeholder="25" tabindex="5" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Puerto del servidor de correo (numérico)</span></span><br/>

                                    <label for="ssl">Autentificación: </label>
                                    <input class="radio" type="radio" id="auth_true" name="authMail" tabindex="6" value="true">Sí
                                    <input class="radio" type="radio" id="auth_false" name="authMail" tabindex="7" value="false" checked>No<br/><br/>

                                    <div id="oculto" class="oculto">
                                        <label for="usuarioMail">Usuario: </label>
                                        <input type="text" id="usuarioMail" name="usuarioMail" placeholder="info@gesthora.com" tabindex="8" />
                                        <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Usuario del correo electrónico</span></span><br/>

                                        <label for="password">Contraseña: </label>
                                        <input type="password" id="passwordMail" name="passwordMail" tabindex="9"/>
                                        <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Contraseña del correo electrónico</span></span><br/><br/>
                                    </div>
                                    <label for="ssl">Uso de SSL: </label>
                                    <input class="radio" type="radio" id="ssl_true" name="sslMail" tabindex="10" value="true">Sí
                                    <input class="radio" type="radio" id="ssl_false" name="sslMail" tabindex="11" value="false" checked>No<br/>

                                </fieldset>     

                                <fieldset>

                                    <legend>Parámetros del usuario administrador</legend>

                                    <label for="usuario">Usuario: </label>
                                    <input type="text" id="usuarioAdmin" name="usuarioAdmin" pattern="[0-9a-z]{5,15}"  placeholder="juansanz" tabindex="12" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Debe tener entre 5 y 15 caracteres (válidos a-z y 0-9)</span></span><br/>

                                    <label for="password">Contraseña: </label>
                                    <input type="password" id="passwordAdmin" name="passwordAdmin" pattern="[0-9a-z]{5,15}"  tabindex="13" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Debe tener entre 5 y 15 caracteres (válidos a-z y 0-9)</span></span><br/>

                                    <label for="nombre">Nombre: </label>
                                    <input type="text" id="nombre" name="nombre" placeholder="Juan" tabindex="14" required /><br/>

                                    <label for="apellido1">1º Apellido: </label>
                                    <input type="text" id="apellido1" name="apellido1" placeholder="Sanz" tabindex="15" required /><br/>

                                    <label for="apellido2">2º Apellido: </label>
                                    <input type="text" id="apellido2" name="apellido2" placeholder="López" tabindex="16" required /><br/>

                                    <label for="dni">DNI:</label>
                                    <input type="text" id="dni" name="dni" maxlength="9" pattern="[0-9]{8}[A-Z]{1}" placeholder="12345678A" tabindex="17" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Debe seguir el formato 00000000A</span></span><br/>

                                    <label for="email">Correo electrónico:</label>
                                    <input type="email" id="email" name="email" placeholder="juansanz@email.com" tabindex="18" required/>
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Asegúrese de que sea un email válido</span></span><br/><br/>

                                </fieldset>

                                <button name="enviar" value="consultar" type="submit">Enviar</button>
                                <button type="reset">Limpiar</button><br/>

                            </form>

                            <% } else {%>
                            <p><%=MsgBean.getMsg()%></p>  

                            <% MsgBean.setMsg("");%>

                            <% }%>

                        </section>

                    </div>

                </div>

                <jsp:include page="/jsp/views/footer.jsp"/>

            </div>
        </div>

    </body>
</html>
